<template>
  <div class="upload-img-div">
            <el-upload class="feedbackUpload-img" accept=".png,.jpg,.jpeg"
                       :style="{backgroundImage:'url(' + dialogImageUrl + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'contain'}"
                       action="aaa" :limit="1" :before-upload="beforeUpload" :on-change="handlePictureCardPreview"
                       :show-file-list="false" list-type="picture">
              <i v-show="!dialogImageUrl" class="el-icon-camera avatar-uploader-icon"></i>
              <div v-show="!dialogImageUrl" slot="tip" class="el-upload__text upload__tip">上传照片</div>
            </el-upload>
            <!-- <i v-show="dialogImageUrl" class="el-icon-delete delUploadImg" @click="delUploadImg"></i> -->
          </div>

</template>

<script>
export default {
  data() {
      return {
        dialogImageUrl: '',//上传图片后的图片地址
        uploadImgBase64: '',//存储将图片转化为base64后的字符
      };
    },
    methods:{
      getimg(event) {
      // this.img64=[]
      // for(var i=0;i<event.length;i++){
        const file = event.raw;
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {//加载图片转base64
        this.uploadImgBase64 = e.target.result;
        // console.log(this.getimgbase64);
        // uploadImgBase64=
        this.$store.commit('imgbian',this.uploadImgBase64)
        console.log(this.uploadImgBase64);
        this.$store.commit('imgbian',this.uploadImgBase64)
      };
      reader.readAsDataURL(file);//①读取文件
      // }
      // this.$emit("numchange")
      
    },
      // 文件改变时勾子函数
      handlePictureCardPreview(file) {
        this.getimg(file)
        
      },
      
      // 上传前勾子函数
      beforeUpload(file) {
        this.toBase64(file);
        return false;//取消自动上传
      },
      handleAddFeedback() {
        let self = this;
        if (!self.addFeedbackInfo) {
          this.$message({
            message: '反馈消息不能为空',
            type: 'warning'
          });
        } else {
          let addFeedbackForm = {};
          addFeedbackForm.StudentInf = self.addFeedbackInfo;
          addFeedbackForm.StudentImg = self.uploadImgBase64;
          self.$http.post('feed_back_add', addFeedbackForm)
            .then((res) => {
            })
            .catch(() => {
              this.$message({
                message: '出错了，请稍后再试',
                type: 'error'
              });
            });
        }
      },
      // 删除已上传图片
      delUploadImg() {
        this.dialogImageUrl = '';
        this.uploadImgBase64 = '';
      },
      // 将图片转为base64（这个方法是网上找的）
      toBase64(file) {
        const self = this;
        let reader = new FileReader();
        reader.onloadend = function () {
          self.uploadImgBase64 = reader.result;
        };
        if (file) {
          reader.readAsDataURL(file);
        }
      },
    }
}
</script>